﻿@page "/dock-view/layout"
@inherits BaseDockView

<h4>自定义布局</h4>
<p>通过设置 <code>DockView</code> 的属性 <code>LayoutConfig</code> 初始化控制面板的显示布局, 方法 <code>GetLayoutConfig</code> 获取面板的显示布局</p>

<GroupBox Title="布局切换">
    <Button OnClick="OnToggleLayout1" Text="布局1"></Button>
    <Button OnClick="OnToggleLayout2" Text="布局2"></Button>
    <Button OnClick="OnToggleLayout3" Text="布局3"></Button>
    <Button OnClick="Reset" Text="复位"></Button>
</GroupBox>

<div class="dock-toggle-demo">
    <DockView @ref="DockView" Name="DockViewLayout" LayoutConfig="@LayoutConfig">
        <DockContent Type="DockContentType.Column">
            <DockComponent Title="标签一">
                <Table TItem="DynamicObject" DynamicContext="DataTableDynamicContext"
                       IsStriped="true" IsBordered="true" IsExcel="true" ShowRefresh="false"
                       ShowDefaultButtons="false">
                    <DetailRowTemplate>
                        <div class="p-2 w-100">
                            <Table TItem="DynamicObject" DynamicContext="GetDetailDataTableDynamicContext(context)" IsStriped="true" IsBordered="true" IsExcel="true">
                            </Table>
                        </div>
                    </DetailRowTemplate>
                </Table>
            </DockComponent>
            <DockComponent Title="标签二">
                <Table TItem="Foo" @bind-Items="Items"
                       IsStriped="true" IsBordered="true" IsMultipleSelect="true"
                       ShowToolbar="true" ShowExtendButtons="true" ShowSkeleton="true"
                       OnAddAsync="@OnAddAsync">
                    <TableColumns>
                        <TableColumn @bind-Field="@context.DateTime" Width="180" />
                        <TableColumn @bind-Field="@context.Name" />
                        <TableColumn @bind-Field="@context.Address" Width="180" TextEllipsis="true" ShowTips="true" />
                        <TableColumn @bind-Field="@context.Education" />
                        <TableColumn @bind-Field="@context.Count" />
                        <TableColumn @bind-Field="@context.Complete" />
                    </TableColumns>
                </Table>
            </DockComponent>
            <DockComponent Title="标签三">
                <FetchData></FetchData>
            </DockComponent>
        </DockContent>
    </DockView>
</div>
